<template>
  <j-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="model" :rules="validatorRules">
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="folderName" label="文件夹名称">
          <a-input placeholder="请输入文件夹名称" v-model="model.folderName" />
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="projectId" label="所属项目">
          <a-select
            show-search
            placeholder="搜索下拉"
            :filter-option="filterOption"
            @search="handleChange('1', $event)"
            @change="onchanges"
            v-model="model.projectId"
          >
            <a-select-option :value="item.id" v-for="item in projectNameList" :key="item.id">{{
              item.projectName
            }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="content" label="所属项目下的文件夹">
          <a-tree-select placeholder="请选择文件夹" v-model="model.parentId" :treeData="busFolderplist" :replace-fields="fieldNames" @change="treechange" allow-clear tree-default-expand-all>
          </a-tree-select>
        </a-form-model-item>
        <br />
      </a-form-model>
    </a-spin>
  </j-modal>
</template>

<script>
import { httpAction, getAction, shareIndexurl } from '@/api/manage'
import { busFoldertreelist,busFoldtails } from '@/api/staticapi'
import { defineInitHook } from 'codemirror'
import moment from 'moment'

export default {
  name: 'BusTreviRiverPcModal',
  props: ['busFolderVo'],

  data() {
    return {
      title: '操作',
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },

      confirmLoading: false,
      validatorRules: {
        userId: [{ required: true, message: '请输入用户id!' }]
      },
      url: {
        add: '/bus/busFolder/add',
        edit: '/bus/busFolder/edit',
        pjtselect: '/bus/busProject/projectNameList', //所有项目
        busFolder: '/bus/busFolder/treeList' //所属文件夹
      },
      validatorRules: {
        folderName: [{ required: true, message: '请输入文件夹名称' }],
        projectId: [{ required: true, message: '请选择所属项目' }]
      },
      projectNameList: [],
      busFolderplist: [],
      recods: {},
      departTree: [], //所属文件夹的树形结构
      // busFolderVo:{},
      fieldNames: { children: 'children', title: 'folderName', key: 'hierarchicalCode',value:'id' },//替换 treeNode 中字段
      treeobj:{},//选中时获取子文件夹的参数

    }
  },
  created() {
    this.initokp()
  },
  mounted() {
    console.log(this, 'this')
    this.selectproject()
    this.derplist()
    //所属文件夹树形数据请求
    this.dataTree()
  },
  methods: {
    initokp() {
      console.log('初始化成功' + 222)
      this.projectNameList = this.busFolderVo
      this.busFolderplist = this.busFolderVo
    },
    // 所属文件夹树形结构数据
    dataTree() {
      var that = this
      that.departTree = []
      busFoldertreelist().then(res => {
        for (let i = 0; i < res.result.length; i++) {
          let temp = res.result[i]
          that.departTree.push(temp)
        }
      })

      console.log(this.departTree, 'departTree')
    },
    //树形结构选中
    // treeChange(value, data) {
    //   console.log(value, data, 'value')
    // },

    //搜索事件
    handleChange(type, e) {
      if (type == 1) {
        this.selectproject(e)
      } else if (type == 2) {
        this.derplist(e)
      }
    },

    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    //所属项目
    selectproject(name) {
      const httpurl = this.url.pjtselect
      const params = {
        projectNidame: name
      }
      getAction(httpurl, params).then(res => {
        this.projectNameList = res.result
      })
    },
    //所有项目进行选择事件
    onchanges(e) {
      this.derplist(e, 'type')
      // this.model.parentId = ''
    },
    //文件夹名称
    derplist(name, type) {
      console.log(name+type+"111")
      const httpurl = this.url.busFolder
      let params
      if (type == 'type') {
        params = {
          projectId: name
        }
      } else {
        params = {
          folderName: name
        }
      }
      getAction(httpurl, params).then(res => {
        const treedata = res.result
        this.busFolderplist = treedata
      })
      //调用父组件方法,刷新树结构
      this.$emit('showTree')
    },
    add() {
      //初始化默认值
      this.visible=true
      // if (this.model==null) {
      //   this.model = Object.assign({}, record)
      // }
      // let type = 'type'
      // this.derplist(record.projectId,type)
      // const httpurl = this.url.busFolder
      // let params = {
      //     projectId: this.model.projectId
      //   }
      // getAction(httpurl, params).then(res => {
      //   this.busFolderplist = res.result
      // })

      //调用父组件方法,刷新树结构
      this.$emit('showTree')
    },
    edit(record) {
      this.model = Object.assign({}, record)
      this.visible = true
      console.log(record, 'record')
      let type = 'type'
      this.derplist(record.projectId,type)
      console.log("打开面板按钮")
    },
    setValue(busFolderVo) {
      // console.log(busFolderVo,'busFolderVo');
      // this.model.projectId= busFolderVo.projectId
      // if (busFolderVo.id !=null) {
      //   this.model.parentId = busFolderVo.id
      // }
      const obj = {
        parentId: busFolderVo.id,
        projectId: busFolderVo.projectId
      }
       this.model = Object.assign({},obj)
    },
    close() {
      this.$emit('close')
      this.visible = false
      this.$refs.form.clearValidate()
    },
    treechange(e){
        console.log(e,'parentid');
        busFoldtails({id:e}).then((res)=>{
              this.treeobj = res.result
            })
    },

    //提交表单
    handleOk() {

      const that = this
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          let params = {}
          let obj = this.treeobj


          console.log(obj,'obj');
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
            params = {
              folderName: this.model.folderName,
              projectId: this.model.projectId,
              parentId: this.model.parentId,
              steps: this.model.parentId ? obj.steps + 1 : 1,
              hierarchicalCode: this.model.parentId ? obj.hierarchicalCode : '',
              url: shareIndexurl
            }

          } else {
            httpurl += this.url.edit
            method = 'post'
            // let obj = this.busFolderplist.find(item => item.id == this.model.parentId)
            console.log(this.model, 'obj')
            params = {
              id: this.model.id,
              folderName: this.model.folderName,
              projectId: this.model.projectId,
              parentId: this.model.parentId,
              steps: obj.steps + 1,
              hierarchicalCode: obj.hierarchicalCode
            }
          }
          console.log(params, 'params')
          httpAction(httpurl, params, method)
            .then(res => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
                this.derplist()
                this.model = {}
                //数据置空

              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
              that.close()
            })
        } else {
          return false
        }
      })
    },
    handleCancel() {
      this.close()
      this.model = {}
    }
  }
}
</script>

<style lang="less" scoped></style>
